<template>
  <view class="register">
    <u-navbar
      title="登录"
      bgColor="transparent"
      :fixed="false"
      :autoBack="true"
      leftIconColor="#fff"
    >
      <template #center>
        <text style="color: #fff"> 注册 </text>
      </template>
    </u-navbar>
    <view class="content">
      <!-- 主体表单 -->
      <view class="form-body">
        <view class="main">
          <image
            src="/static/login/ava.png"
            style="width: 141rpx; height: 150rpx; border-radius: 50%"
          ></image>
          <wInput
            class="w-input"
            v-model="tel"
            type="text"
            maxlength="35"
            placeholder="请输入手机号"
            :focus="isFocus"
          ></wInput>
          <wInput
            class="w-input"
            v-model="pass"
            type="password"
            maxlength="20"
            placeholder="请输入密码"
            isShowPass
          ></wInput>
          <wInput
            class="w-input"
            v-model="repass"
            type="password"
            maxlength="20"
            placeholder="请确认密码"
            isShowPass
          ></wInput>
          <wInput
            class="w-input"
            ref="runCode"
            v-model="code"
            isShowCode
            type="number"
            maxlength="35"
            placeholder="请输入验证码"
            @setCode="getVerCode()"
          >
          </wInput>
        </view>
        <wButton
          :componentStyle="{
            borderRadius: '8rpx',
            fontWeight: '500',
            borderRadius: '49rpx',
          }"
          fontColor="#fff"
          bgColor="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
          class="wbutton"
          text="注册"
          :rotate="isRotate"
          @click="startReg"
        ></wButton>
        <!-- <view style="display: flex;align-items: center;margin-top: 30rpx;">

					<u-checkbox-group> <u-checkbox v-model="checked" shape="circle"></u-checkbox> </u-checkbox-group>

					<text style="font-size: 24rpx; color: #999">
            我已同意<text
              class="active-font"
              @click="openDialog('用户服务协议')"
              >《用户服务协议》</text
            >及<text @click="openDialog('隐私政策')" class="active-font"
              >《隐私政策》</text
            >
          </text>
				</view> -->

        <!-- 其他登录 -->
        <!-- <view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
			</view> -->

        <!-- 底部信息 -->
        <!-- <view class="footer">
					<navigator url="forget" open-type="navigate">找回密码</navigator>
					<text>|</text>
					<navigator url="register" open-type="navigate">注册账号</navigator>
				</view> -->
      </view>
      <!-- 头部logo -->
      <!-- <view class="header">
				<image :src="logoImage"></image>
			</view> -->
      <!-- 主体 -->
      <!-- <view class="main">
				<wInput
					v-model="email"
					type="text"
					maxlength="35"
					placeholder="请输入邮箱账号"
				></wInput>
				<wInput
					v-model="pass"
					type="password"
					maxlength="20"
					placeholder="请输入登录密码"
					isShowPass
				></wInput>
				<wInput
					v-model="repass"
					type="password"
					maxlength="20"
					placeholder="请确认登录密码"
					isShowPass
				></wInput>
				<wInput
					v-model="inviteid"
					type="text"
					maxlength="20"
					placeholder="推荐人ID(选填)"
				></wInput>
				<wInput
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					
					isShowCode
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
					
			</view> -->

      <!-- <wButton 
				class="wbutton"
				text="注 册"
				:rotate="isRotate" 
				@click.native="startReg()"
			></wButton> -->

      <!-- 底部信息 -->
      <!-- <view class="footer">
				<text 
					@tap="isShowAgree" 
					class="cuIcon"
					:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
				> 同意</text> -->
      <!-- 协议地址 -->
      <!-- <navigator url="" open-type="navigate">《协议》</navigator> -->
      <!-- </view> -->
    </view>
    <u-popup
      mode="bottom"
      :show="pop_show"
      :round="16"
      :closeOnClickOverlay="false"
    >
      <view style="display: flex; flex-direction: column; width: 100%">
        <view
          style="
            display: flex;
            height: 100rpx;
            justify-content: space-between;
            line-height: 100rpx;
            padding: 0 30rpx 0 30rpx;
          "
        >
          <view
            style="
              display: inline-block;
              font-size: 32rpx;
              font-weight: 500;
              color: #000;
            "
          >
            <text>{{ pop_title }}</text>
          </view>
          <view style="display: flex; margin: auto 0" @click="pop_show = false">
            <u-icon color="#777777" size="16" name="close"></u-icon>
          </view>
        </view>
        <scroll-view
          style="padding: 0 30rpx; width: calc(100% - 60rpx); height: 70vh"
          scroll-y="true"
        >
          <p v-html="pop_content"></p>
        </scroll-view>
        <view style="height: 10px"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let _this;
import wInput from "../../components/watch-login/watch-input.vue"; //input
import wButton from "../../components/watch-login/watch-button.vue"; //button
import w_md5 from "../../js_sdk/zww-md5/w_md5.js";
export default {
  data() {
    return {
      time: "",
      token: "",
      app_key: "",
      websiteUrl: "",
      //logo图片 base64
      logoImage: "/static/logo.png",
      tel: "", // 邮箱/用户/电话
      inviteid: "", //邀请id
      pass: "", //密码
      repass: "", //确认密码
      code: "", //验证码
      showAgree: true, //协议是否选择
      isRotate: false, //是否加载旋转
      checked: false,
      isFocus: true,
      pop_content: "",
      pop_show: false,
      pop_title: "",
    };
  },
  components: {
    wInput,
    wButton,
    w_md5,
  },
  mounted() {
    _this = this;
    this.popContent = uni.getStorageSync("txt");
  },
  onLoad() {},
  methods: {
    isShowAgree() {
      //是否选择协议
      _this.showAgree = !_this.showAgree;
    },
    goBack() {
      uni.navigateBack({});
    },
    unescapeHTML(htmlString) {
      const txt = document.createElement("textarea");
      txt.innerHTML = htmlString;
      return txt.value;
    },
    getVerCode() {
      //获取验证码
      // if (!uni.$u.test.email(this.email)) {
      // 	uni.showToast({
      // 		icon: 'none',
      // 		position: 'bottom',
      // 		title: '邮箱不正确'
      // 	});
      // 	return false;
      // }
      // console.log("获取验证码")

      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&tel=" +
        this.tel +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/login/telcode/reg?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("注册结果: ", res);
          if (res.data.code == 1) {
            this.$refs.runCode.$emit("runCode"); //触发倒计时（一般用于请求成功验证码后调用）
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
          } else {
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
          }
        },
      });

      this.$refs.runCode.$emit("runCode"); //触发倒计时（一般用于请求成功验证码后调用）
      // uni.showToast({
      //     icon: 'none',
      // 	position: 'bottom',
      //     title: '模拟倒计时触发'
      // });

      // setTimeout(function(){
      // 	_this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
      // 	uni.showToast({
      // 	    icon: 'none',
      // 		position: 'bottom',
      // 	    title: '模拟倒计时终止'
      // 	});
      // },3000)
    },
    startReg() {
      //注册
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      if (this.showAgree == false) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先同意《协议》",
        });
        return false;
      }
      // if (this.phoneData.length !=11) {
      //     uni.showToast({
      //         icon: 'none',
      // 		position: 'bottom',
      //         title: '手机号不正确'
      //     });
      //     return false;
      // }
      // if (this.pidData =='') {
      //     uni.showToast({
      //         icon: 'none',
      // 		position: 'bottom',
      //         title: '推荐人不能为空'
      //     });
      //     return false;
      // }
      if (this.pass.length < 6 || this.repass.length < 6) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "密码不能低于6位",
        });
        return false;
      }
      if (this.repass !== this.pass) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "两次密码输入不一致",
        });
        return false;
      }
      if (this.code.length < 4) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "验证码不正确",
        });
        return false;
      }
      _this.isRotate = true;
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "code=" +
        this.code +
        "&deviceid=" +
        getApp().globalData.deviceid +
        "&tel=" +
        this.tel +
        "&facility=" +
        getApp().globalData.facility +
        "&inviteid=" +
        this.inviteid +
        "&pass=" +
        this.pass +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/login/reg?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("注册结果: ", res);
          if (res.data.code == 1) {
            _this.isRotate = false;
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
            uni.navigateBack();
            console.log("注册成功");
          } else {
            _this.isRotate = false;
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
          }
        },
      });

      // setTimeout(function(){
      // 	_this.isRotate=false
      // },3000)
    },
    openDialog(value) {
      this.pop_title = value;
      if (value === "用户服务协议") {
        this.pop_content = this.popContent.agreement;
      } else {
        this.pop_content = this.popContent.privacy;
      }
      this.pop_show = true;
    },
  },
};
</script>

<style>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
</style>
<style lang="less" scoped>
.form-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  // width: 594rpx;
  // margin: auto;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.active-font {
  color: #3dc6e0;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 48rpx;
  margin-left: 278rpx;
}
.register {
  min-height: 100vh;
  background: linear-gradient(360deg, #6bd6b5 0%, #2ab1a4 100%);
}
.content {
  background-color: #fff;
  width: calc(100% - 48rpx);
  margin: auto;
  border-radius: 16rpx;
  padding-bottom: 64rpx;
  margin-top: 57rpx;
}
.w-input {
  background: #f0f8f5;
  border-radius: 44rpx;
  width: 100%;
}
.main {
  padding: 0 39rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 63rpx;
  width: calc(100% - 78rpx);
}
</style></style>